<template>
    <div class="ve_container">
        <div id="client_per_day_flow" style="width: 100%; height: 600px"></div>
    </div>
</template>
<script>
import cloudNetworkReportMenu from "@/views/pages/cloud_network_report/CloudNetworkReportMenu";

export default {
    data: () => ({
        description: "客户端访问流量",
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "DataLine",
        name: "客户端访问流量",
        parentMenu: cloudNetworkReportMenu,
    }),
};
</script>

<script setup>
import { onMounted } from "vue";

import * as echarts from "echarts";

onMounted(async () => {
    const { code, data } =
        await VE_API.cloudNetworkReport.findClientPerDayFlow();
    if (code === 0) {
        console.log(data);
    }
    const dom = document.getElementById("client_per_day_flow");
    const myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
    });
    // const app = {};

    let option;

    const seriesList = [];

    seriesList.push({
        type: "line",
        name: "进口流量",
        emphasis: {
            focus: "series",
        },
        data: data.clientInFlowList,
    });

    seriesList.push({
        type: "line",
        name: "出口流量",
        emphasis: {
            focus: "series",
        },
        data: data.clientOutFlowList,
    });
    seriesList.push({
        type: "line",
        name: "进、出流量",
        emphasis: {
            focus: "series",
        },
        data: data.clientAllFlowList,
    });

    option = {
        animationDuration: 10000,
        tooltip: {
            trigger: "axis",
            // axisPointer: {
            //   type: 'shadow'
            // }
        },
        legend: {},
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                data: data.dayList,
            },
        ],
        yAxis: [
            {
                type: "value",
            },
        ],
        series: seriesList,
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
    };

    if (option && typeof option === "object") {
        myChart.setOption(option);
    }

    window.addEventListener("resize", myChart.resize);
});
</script>

<style lang="scss" scoped></style>
